@import "@/style/imports";

.wgt-limit {
  &__header {
    display: block !important;
  }
  &__title {
    font-size: 32px;
    color: #000000;
  }
  &__subtitle {
    font-size: 22px;
    padding-left: 0;
    color: #8a8a8a;
  }
}
.slider-wrap {
  position: relative;
  background: #ffffff;
}

.slider-img {
  .slider-item {
    box-sizing: border-box;
    display: block;
    &__img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    &.rounded {
      .slider-item {
        border-radius: 10px;
      }
    }
  }
}
.slider-dot {
  display: flex;
  align-items: center;
  &.no-cover {
    padding: 25px;
  }
  &.center {
    justify-content: center;
  }
  &.right {
    justify-content: flex-end;
  }
  &.cover {
    padding: 0;
    position: absolute;
    // top: -20px;
    z-index: 20;
  }
  &.cover.center {
    left: 50%;
    transform: translateX(-50%);
  }
  &.cover.left {
    left: 20px;
  }
  &.cover.right {
    right: 20px;
  }
  &.dark {
    .dot {
      background: #e6e6e6;
    }
  }
  &.light {
    .dot {
      background: rgba(255, 255, 255, 0.7);
    }
  }
  &.circle {
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 100%;
    }
  }
  &.rectangle {
    .dot {
      /*width: 34px;
      height: 4px;*/
      width: 12px;
      height: 12px;
      transition: width 0.3s linear;
      border-radius: 50%;
      margin-right: 4px;
    }
  }
  .dot {
    margin: 0 6px;
    &.active {
      width: 30px;
      transition: width 0.3s linear;
      border-radius: 6px;
      background: $color-brand-primary;
    }
  }
  &.dot-size-switch {
    &.circle {
      .dot {
        border-radius: 20px;
      }
    }
    .dot {
      transition: all 0.3s ease;
      &.active {
        width: 30px;
      }
    }
  }
}

/*  #ifdef weapp  */
// .slider-dot {
//   &.cover {
//     top: -20px;
//   }
// }
/*  #endif  */

.slider-count {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  width: 50px;
  height: 50px;
  font-size: 24px;
  z-index: 20;
  &.left {
    left: 20px;
  }
  &.right {
    right: 20px;
  }
  &.dark {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
  }
  &.light {
    background: rgba(255, 255, 255, 0.7);
    color: #555;
  }
  &.circle {
    border-radius: 100%;
  }
  &.rectangle {
    border-radius: 0;
  }
}

.slider-wrap {
  &.padded {
    .sliderimg {
      padding: 20px 0;
      .item {
        padding: 0 20px;
      }
    }
    .slider-dot {
      &.no-cover {
        padding: 10px 45px;
      }
      &.cover {
        padding: 0;
        bottom: 40px;
      }
      &.cover.left {
        left: 40px;
      }
      &.cover.right {
        right: 40px;
      }
    }
    .slider-count {
      bottom: 40px;
      &.left {
        left: 40px;
      }
      &.right {
        right: 40px;
      }
    }
  }
}

.slider-caption {
  padding: 20px 30px;
  color: #999;
}
